<!-- author: xuett -->
<!-- date: 2022-09-08 17:37:35 -->
<!-- description: 富文本编译器 -->
<template>
  <div class="editor-container" style="">
    <Toolbar class="toolbar" :editor="editorRef" :default-config="toolbarConfig" :mode="mode" />
    <Editor v-model="valueHtml" class="editor" :default-config="editorConfig" :mode="mode" @on-created="handleCreated" />
  </div>
</template>

<script setup>
import store from "@/store";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

const $emit = defineEmits(["update:modelValue"]);
const $props = defineProps({
  modelValue: {
    type: String,
    default: ""
  }
});

const mode = "default";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = computed({
  get: () => $props.modelValue,
  set: (val) => $emit("update:modelValue", val)
});
const getText = () => {
  let text = editorRef.value.getText();
  return text;
};

const toolbarConfig = {
  //排除掉某些菜单
  excludeKeys: ["code", "codeBlock", "todo", "group-video", "fullScreen"]
};
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {}
};

const token = store.getters.getToken;

editorConfig.MENU_CONF["uploadImage"] = {
  //上传地址
  server: "api/layer/v1/sys-service/com/upload",
  // form-data fieldName ，默认值 'wangeditor-uploaded-image'
  fieldName: "file",

  // 单个文件的最大体积限制，默认为 50M
  maxFileSize: 50 * 1024 * 1024, // 50M

  // 最多可上传几个文件，默认为 100
  maxNumberOfFiles: 10,

  // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  allowedFileTypes: ["image/*"],

  // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
  meta: {
    // token:'xxx'
    // otherKey: 'yyy'
  },

  // 将 meta 拼接到 url 参数中，默认 false
  metaWithUrl: false,

  // 自定义增加 http  header
  headers: {
    // Accept: 'text/x-json',
    // otherKey: 'xxx'
    authorization: token ? token : ""
  },

  // 跨域是否传递 cookie ，默认为 false
  withCredentials: false,

  // 超时时间，默认为 10 秒
  timeout: 10 * 1000, // 5 秒
  // 自定义插入图片
  customInsert(res, insertFn) {
    // JS 语法
    // res 即服务端的返回结果
    let fileData = res.data;
    // 从 res 中找到 url alt href ，然后插入图片
    // insertFn(url, alt, href);
    insertFn(fileData.fileUrl, fileData.originalName);
  }
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 编辑器回调函数
//创建
const handleCreated = (editor) => {
  // console.log("created", editor);
  editorRef.value = editor; // 记录 editor 实例，重要！
  // setTimeout(() => {
  //   const toolbar = DomEditor.getToolbar(editorRef.value);
  //   console.log(toolbar.getConfig().toolbarKeys);
  // }, 1000);
};

//内容改变时
// const handleChange = (editor) => {
//   console.log("change:", editor.getHtml());
// };
//销毁
// const handleDestroyed = (editor) => {
//   console.log("destroyed", editor);
// };
//聚焦
// const handleFocus = (editor) => {
//   console.log("focus", editor);
// };
//失焦
// const handleBlur = (editor) => {
//   console.log("blur", editor);
// };
//自定义弹窗
// const customAlert = (info, type) => {
//   alert(`【自定义提示】${type} - ${info}`);
// };
//自定义粘贴
// const customPaste = (editor, event, callback) => {
//   console.log("ClipboardEvent 粘贴事件对象", event);

//   // 自定义插入内容
//   editor.insertText("xxx");

//   // 返回值（注意，vue 事件的返回值，不能用 return）
//   callback(false); // 返回 false ，阻止默认粘贴行为
//   // callback(true) // 返回 true ，继续默认的粘贴行为
// };

defineExpose({ getText });
</script>

<style scoped lang="scss">
.editor-container {
  width: 100%;
  min-height: 350px;
  border: 1px solid #e1e5ee;
  border-radius: 4px;
  overflow: hidden;
  .toolbar {
    border-bottom: 1px solid #e1e5ee;
  }
  .editor {
    min-height: 300px !important;
    overflow-y: hidden;
  }
}
</style>
